<template>
  <div id="doQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="question">
          <a-tab-pane key="question" title="题目信息">
            <a-card :title="question?.title">
              <div>
                <a-descriptions
                  title="判题配置"
                  :column="{ xs: 1, md: 2, lg: 3 }"
                >
                  <a-descriptions-item label="时间限制">
                    {{ question?.judgeConfig?.timeLimit }}
                  </a-descriptions-item>
                  <a-descriptions-item label="内存限制">
                    {{ question?.judgeConfig?.memoryLimit }}
                  </a-descriptions-item>
                  <a-descriptions-item label="堆栈限制">
                    {{ question?.judgeConfig?.stackLimit }}
                  </a-descriptions-item>
                </a-descriptions>
              </div>
              <MdViewer :value="question?.content" />
              <template #extra>
                <a-space>
                  <a-tag
                    v-for="(tag, index) of question?.tags"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" disabled title="评论区"> 评论区</a-tab-pane>
          <a-tab-pane key="answer" disable title="答案">
            暂时无法查看答案
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12">
        <a-form :model="form">
          <a-form-item field="languege" label="编程语言">
            <a-select
              v-model="form.language"
              :style="{ width: '320px' }"
              placeholder="请选择语言"
            >
              <a-option
                v-for="item of languageList"
                :key="item"
                :value="item"
                :label="item"
              />
            </a-select>
          </a-form-item>
        </a-form>
        <CodeEditor
          :code-language="form.language"
          :handle-change="onCodeChange"
          :value="form.code"
        />
        <a-divider size="0" />
        <a-button type="primary" @click="doQuestionSubmit">提交</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps, withDefaults, watch } from "vue";
import {
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";

interface Props {
  id: number;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => 0,
});

const question = ref<QuestionVO>();

const loadData = async () => {
  const id = props.id;
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(id);
  if (res.code === 200) {
    question.value = res.data;
    console.log(question.value);
  } else {
    message.error("查询失败:", res.message as any);
  }
};
//语言列表 todo 从后端拉取
const languageList = ["java", "go", "cpp", "html"];

//用户提交题目列表
const form = ref<QuestionSubmitAddRequest>({
  //需要传给CodeView
  code: "",
  language: "java",

  questionId: props.id,
});

// CodeView内容改变函数
const onCodeChange = (v: string) => {
  form.value.code = v;
};

//提交代码
const doQuestionSubmit = async () => {
  // console.log(form.value);
  const res = await QuestionControllerService.submitUsingPost(form.value);
  if (res.code === 200) {
    message.success("提交成功");
  } else {
    message.error("提交失败", res.message);
  }
};
//初始是加载题目信息
onMounted(() => {
  loadData();
});
</script>

<style scoped>
#doQuestionView {
}
</style>
